<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>统计与分析</text>
		</view>
		<view class="container">
			<uni-data-picker placeholder="专业/班级" popup-title="请选择专业/班级" :localdata="dataTree" v-model="classes">
			</uni-data-picker>
		</view>
		<view class="querybtu" @click="queryInfo">
			<view class="btuicon"></view>
			<view style="margin-left: 70rpx;margin-top: -45rpx;">
				<text>查询</text>
			</view>
		</view>
		<view v-if="Object.keys(chartData).length===0" style="margin-top: 350rpx;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<view class="uliststyle" v-else>
			<u-list height="1400rpx">
				<u-list-item>
					<view class="charts-box">
						<qiun-data-charts :canvas2d='true' inScrollView="true" canvas-id="column" :loadingType="5"
							type="pie" :opts="opts" :chartData="chartData" 
						 />
					</view>
				</u-list-item>
				<u-list-item>
					<view class="classinfocard" v-if="cname!=''">
						<view style="margin-left: 20rpx;margin-top: 10rpx;color: #7c7c7c;">
							<text>姓名/学号</text>
							<text style="margin-left: 145rpx;">辅导员</text>
							<text style="margin-left: 157rpx;">分数</text>
						</view>
						<u-list height="1200rpx">
							<u-list-item v-for="(item,index) in stuInfo " :key="index">
								<u-cell :title="item.sname" :label="item.stuid">
									<text slot="value" class="u-slot-value" :style="{
								          color: item.final_score < 20 ? 'red' :
								                 item.final_score < 35 ? 'lightcoral' :
								                 item.final_score < 40 ? 'pink' : 'green'
								        }" style="position: absolute;margin-left: 550rpx;">{{item.final_score}}分</text>
								</u-cell>
								<view style="margin-left: 290rpx; margin-top: -90rpx;margin-bottom: 60rpx;
									color: #646464;">
									<text>{{item.nickname}}</text>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</u-list-item>
			</u-list>
		</view>

	</view>
</template>

<script>
	import {
		HNIT_URL
	} from '../../../constants';
	export default {
		data() {
			return {
				showxq: false,
				classes: [], // 可设置默认值
				dataTree: [],
				//饼图数据项
				chartData: {},
				//饼图配置
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: true,
						position: "left",
						lineHeight: 25
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 50,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 2,
							borderColor: "#FFFFFF"
						}
					},
					grid: {
						width: "500rpx",
						height: "300rpx",
					}
				},
				//存储学生数组
				stuInfo: [],
				//班级名
				cname: "",
				//专业名
				mname: ""
			}
		},
		onReady() {
			this.getServerData();
		},
		onLoad() {
			//查班级分数详细
			this.selectScores();
			//查专业和班级
			this.selectMajor();
		},
		methods: {
			//查出数据画出饼图
			getServerData() {
				if (this.cname == "") {
					let par = {
						mname: this.mname
					}
					uni.showLoading({
						title: "加载中...",
						mask: true,
					})
					this.$request.post(HNIT_URL + "wx/selectBnameAndCname", par).then(res => {
						// 处理后端数据
						let responseData = res.data;
						// 初始化饼图数据
						let pieChartData = {
							series: [{
								data: [],
							}, ],
						};
						// 遍历 responseData 中的每个键值对
						responseData.forEach(item => {
							// 遍历键值对中的每个班级和学生人数
							for (let className in item) {
								if (item.hasOwnProperty(className)) {
									let studentCount = item[className];
									// 构建饼图数据项
									let pieDataItem = {
										name: className,
										value: studentCount,
										labelText: studentCount + '人'
									};
									// 将数据项添加到饼图数据中
									pieChartData.series[0].data.push(pieDataItem);
								}
							}
						});
						// 模拟从服务器获取数据时的延时
						setTimeout(() => {
							// 更新饼图数据
							this.chartData = JSON.parse(JSON.stringify(pieChartData));
							uni.hideLoading();
						}, 500);
					})

				} else {
					uni.showLoading({
						title: "加载中...",
						mask: true,
					})
					let params = {
						cname: this.cname
					};
					// 发起HTTP请求并等待响应
					this.$request.post(HNIT_URL + "wx/selectproportion", params).then((res) => {
						// 处理后端数据
						let responseData = res.data;
						// 计算每个等级的数量
						let grades = Object.keys(responseData);
						let gradeCounts = grades.map((grade) => responseData[grade].length);
						// 创建饼图数据
						let pieChartData = {
							series: [{
								data: grades.map((grade, index) => {
									return {
										"name": grade,
										"value": gradeCounts[index]
									};
								})
							}]
						};

						// 模拟从服务器获取数据时的延时
						setTimeout(() => {
							// 更新饼图数据
							this.chartData = JSON.parse(JSON.stringify(pieChartData));
							uni.hideLoading();
						}, 500);
					});
				}

			},
			// 返回上一页
			back() {
				uni.reLaunch({
					url: "../../../pages/manage/home/index"
				})

			},
			//查询班级名
			selectMajor() {
				let params = {}
				this.$request.post(HNIT_URL + "wx/selectBanji", params).then((res) => {
					// 后端返回的数据
					const responseData = res.data

					// 创建一个空数组来存储最终的 dataTree 数据
					const dataTree = [];

					// 添加 "全部专业" 节点
					const allMajorNode = {
						text: "全部专业",
						value: "全部专业",
						children: [],
					};
					// 添加 "全部班级" 节点到 "全部专业"
					const allClassesNode = {
						text: "全部班级",
						value: "全部专业-全部班级",
						children: [],
					};
					// 将 "全部班级" 节点添加到 "全部专业" 下
					allMajorNode.children.push(allClassesNode);
					// 从后端数据中提取所有班级并将它们作为 "全部专业" 的子节点
					responseData.forEach((item) => {
						// 拆分班级名称，以逗号分隔
						const classNames = item.cname.split(',');

						classNames.forEach((className) => {
							allMajorNode.children.push({
								text: className,
								value: className,
							});
						});
					});
					// 将 "全部专业" 节点添加到最终的 dataTree 数组的顶层
					dataTree.push(allMajorNode);
					// 遍历从后端获取的数据数组
					responseData.forEach((item) => {
						// 拆分班级名称，以逗号分隔
						const classNames = item.cname.split(',');
						// 创建一个专业节点
						const majorNode = {
							text: item.mname,
							value: item.mname,
							children: [],
						};
						// 添加 "全部班级" 节点
						majorNode.children.push({
							text: "全部班级",
							value: `${item.mname}-全部班级`,
						});
						// 将班级名称添加为子节点
						classNames.forEach((className) => {
							majorNode.children.push({
								text: className,
								value: `${item.mname}-${className}`,
							});
						});
						// 将专业节点添加到最终的 dataTree 数组中
						dataTree.push(majorNode);
					});
					this.dataTree = dataTree

				});

			},
			//点击查询事件
			queryInfo() {
				//判断选择的班级专业，长度 为0的就是啥都没选，专业班级都没有
				if (this.classes.length == 0) {
					this.cname = ""
					this.mname = ""
					this.getServerData();
				}
				//长度为6的话就只选择了班级
				else if (this.classes.length == 6) {
					this.cname = this.classes
					//执行班级详细查询
					this.selectScores();
					//画饼图
					this.getServerData();
				} else {
					const name = this.classes.split('-')
					//选择了专业和班级
					if (name[0] === "全部专业") {
						this.mname = ""
					} else {
						this.mname = name[0]
					}
					if (name[1] === "全部班级") {
						this.cname = ""
					} else {
						this.cname = name[1]
					}
					this.getServerData();
					this.selectScores();
				}
			},
			//  查出班级详细考勤详细信息
			selectScores() {
				let params = {
					cname: this.cname
				}
				this.$request.post(HNIT_URL + "wx/selectByCname", params).then(res => {
					this.stuInfo = res.data
				})
			},
		}
	}
</script>

<style scoped>
	.uliststyle {
		margin-top: 10rpx;
		width: 100%;
	}

	.classinfocard {
		margin-left: 20rpx;
		width: 94%;
		background-color: white;
		height: 1290rpx;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
		margin-top: 35rpx;
		margin-bottom: 100rpx;
	}

	.charts-box {
		margin-left: 20rpx;
		width: 94%;
		background-color: white;
		height: 300px;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
		margin-top: 30rpx;
		z-index: 1;
	}

	.toptitle {
		margin-top: -65rpx;
		color: #000000;
		font-size: 50rpx;
		font-family: FZSuXSLSJW;
	}

	.btuicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1694520113153' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6054' width='200' height='200'%3E%3Cpath d='M882.030272 974.530557l-141.416183-141.416183a454.95573 454.95573 0 1 1 92.005007-92.005008l141.357915 141.474451a65.026972 65.026972 0 0 1-91.946739 91.94674zM142.902014 468.473882a325.134858 325.134858 0 1 0 325.134859-325.134858 325.134858 325.134858 0 0 0-325.076591 325.018322l-0.058268 0.116536z' fill='%231b56e2' p-id='6055'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.querybtu {
		font-size: 34rpx;
		font-family: FZSuXSLSJW;
		margin-left: 560rpx;
		margin-top: -70rpx;
		width: 145rpx;
		height: 70rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
	}

	.backicon {
		float: left;
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #f4f4f4;
	}

	.container {

		margin-left: -165rpx;
		margin-top: 30rpx;
		width: 550rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
		z-index: 99 !important;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>